<script setup lang="ts">
import { ref } from 'vue'
import { useRouter } from 'vue-router';
import { useUserStore } from '@/stores/user';
import { Loading } from 'vant';

import { fetchWithdrawalRecords } from '@/api/withdraw'

import BiNavBar from '@/components/bi-navbar/index.vue'

const router = useRouter()
const userStore = useUserStore()

interface Flow {
    createdTime: string,
    amount: string,
    applyStatus: number,
    applyStatusName: string,
    status: number,
    remark: string | null
}

const loading = ref(true)
const handleStopLoading = () => {
    loading.value = false
}
const records = ref([] as Flow[])
const handleFetchWithdrawalRecords = async () => {
    try {
        const res = await fetchWithdrawalRecords({ deviceInfo: userStore.device })
        records.value = res.data.data

        handleStopLoading()
    } catch (error) {
        throw new Error(error as string)
    }
}
handleFetchWithdrawalRecords()

const parseTime = (date: string) => {
    return date && (date.split(' ') || [])
}
const statusTextColor = (status: number | string) => {
    const statusColorMap: any = {
        2: '#70b95a',
        3: '#ff0000',
        4: '#D54F00',
        5: '#ff5200'
    }
    return {
        color: statusColorMap[status] || '#1d1d1f'
    }
}
const recordStatusMap: any = {
    1: 'In progress',
    2: 'Successful',
    3: 'Failed'
}

</script>

<template>
    <div class="flow-top">
        <BiNavBar title="Record" @click-left="router.back" />
    </div>

    <div class="flow-bottom">
        <Loading v-if="loading" style="position: fixed;top: 50%;left: 50%;transform: translate(-50%, -50%);" vertical
            color="#6b61ad" text-color="#6b61ad">
            Loading...
        </Loading>
        <div v-else class="flow">
            <ul>
                <li v-for="record in records">
                    <div class="record">
                        <div class="record-left">
                            <span class="record-left_span" v-for="date in parseTime(record.createdTime)">
                                {{ date }}
                            </span>
                        </div>
                        <div class="record-mid">
                            <div class="record-amount">
                                <span class="record-amount_span">+{{ record.amount }}</span>
                            </div>
                        </div>
                        <div class="record-right">
                            <div class="record-right-top">
                                <div class="record-status">
                                    <span v-if="record.applyStatus < 5" class="record-status_span"
                                        :style="statusTextColor(record.applyStatus)">
                                        {{ record.applyStatusName }}
                                    </span>
                                    <span v-else class="record-status_span" :style="statusTextColor(record.status)"
                                        style="font-size: 3.9vmin;">
                                        {{ recordStatusMap[record.status] }}
                                    </span>
                                </div>
                            </div>
                            <div class="record-right-bottom" v-if="record.status == 3">
                                <span>{{ record.remark }}</span>
                            </div>
                        </div>
                    </div>
                </li>
            </ul>
            <span class="flow-tips">Tips: After submitting the application, it will be reviewed within 24 hours! If you
                have any questions, please send an email to: sharterdev@gmail.com.</span>
        </div>
    </div>
</template>

<style scoped lang="scss">
@import url(./flow.scss);
</style>